<template>
  <div class="container mx-auto">

    <NavWap  class="xl:hidden" @showBigSlideMenu="showBigSlideMenu"  />
    <NavPc  class="hidden xl:block" @showBigSlideMenu="showBigSlideMenu"  />
   <NewTopic v-bind:reload="reloadEditCommnet"  type="comment"  :intdata="newCommnetData"/>
    <!-- pc web端 拉出左侧菜单 -->
    <SlideMenuBig  v-if="slideTpye == 'big'" @showBigSlideMenu="showBigSlideMenu"/>
    <!-- resort -->
    <NewTopic type="topic" :intdata="newTopicData" />

   <div :class="pl" class="  pt-16  min-h-screen w-full"  >
       <div class="   p-4">
       <div class=" " >
           <!-- This example requires Tailwind CSS v2.0+ -->
                <div class="mt-4">
                    <div class="text-center">
                    <!-- <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Transactions</h2> -->
                    <h1 v-html="topic.title" class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-100 sm:text-4xl"> </h1>
                     <div class="truncate mt-2 p-2" v-if="topic.tags && topic.tags.length>0">
                    <a class="btn btn-outline btn-xs text-gray-400 mx-1" v-for="(tag,key) in topic.tags" v-bind:key="key" :href="'/tags/'+tag.value">{{tag.value }}</a> 
                    </div>
                    <div class="mb-2" >
                        <span class="text-gray-300">  Overall Rating:</span>
                         <Star  :count="Number(topic.overall_rating)"/>
                        
                    </div>
                   
                    <div class="   ski-content  " :class="moreContentStatus ? '' :'line-4'"   v-html="topic.post.content"></div>
                    </div>
                     
                    <div @click="showMoreContent" class=" text-orange-500 text-center cursor-pointer text-xl mb-5">Show More</div>
                 
                </div>
                  <div class=" grid grid-cols-1 gap-4  sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6">
            <div class="bg-gray-800 shadow overflow-hidden sm:rounded-lg mt-3">
              <div class="  py-5   text-center">
                  <h3 class="text-lg leading-6 font-medium text-gray-100">
                  Terrain Overview  
                  </h3>
              </div>
              
               
                  <dl>
                    <div class="bg-gray-700 px-4 py-5 ">
                          <div class="bg-gray-700 px-4 py-2 grid grid-cols-2 gap-4" v-for="(attribute,key) in topic.terrain_attribute" v-bind:key="key">
                              <dt class="text-sm font-medium text-gray-300">
                              {{key}}
                              </dt>
                              <dd class="mt-1 text-sm text-gray-100">
                            {{attribute}}
                              </dd>
                          </div>

                          
                  </div>
                    
                  </dl>
              
            </div>

             <div class="bg-gray-800 shadow overflow-hidden sm:rounded-lg mt-3">
              <div class="px-4 py-5 sm:px-6 text-center">
                  <h3 class="text-lg leading-6 font-medium text-gray-100">
                   Lifts  
                  </h3>
              </div>
              
               
                  <dl>
                    <div class="bg-gray-700 px-4 py-5 ">
                          <div class="bg-gray-700 px-4 py-2 grid grid-cols-2 gap-4" v-for="(attribute,key) in topic.lifts" v-bind:key="key">
                              <dt class="text-sm font-medium text-gray-300" v-html="key"> </dt>
                              <dd class="mt-1 text-sm text-gray-100">
                            {{attribute}}
                              </dd>
                          </div>

                          
                  </div>
                    
                  </dl>
              
            </div>

            <div class="bg-gray-800 shadow overflow-hidden sm:rounded-lg mt-3">
              <div class="px-4 py-5 sm:px-6 text-center">
                  <h3 class="text-lg leading-6 font-medium text-gray-100">
                  Elevation
                  </h3>
              </div>
              
               
                  <dl>
                    <div class="bg-gray-700 px-4 py-5 ">
                          <div class="bg-gray-700 px-4 py-2 grid grid-cols-2 gap-4" v-for="(attribute,key) in topic.elevation" v-bind:key="key">
                              <dt class="text-sm font-medium text-gray-300">
                              {{key}}
                              </dt>
                              <dd class="mt-1 text-sm text-gray-100">
                            {{attribute}}
                              </dd>
                          </div>

                          
                  </div>
                    
                  </dl>
              
            </div>


            <div class="bg-gray-800 shadow overflow-hidden sm:rounded-lg mt-3">
              <div class="px-4 py-5 sm:px-6 text-center">
                  <h3 class="text-lg leading-6 font-medium text-gray-100">
                  Important Dates
                  </h3>
              </div>
              
               
                  <dl>
                    <div class="bg-gray-700 px-4 py-5 ">
                          <div class="bg-gray-700 px-4 py-2 grid grid-cols-2 gap-4" v-for="(attribute,key) in topic.important_dates" v-bind:key="key">
                              <dt class="text-sm font-medium text-gray-300">
                              {{key}}
                              </dt>
                              <dd class="mt-1 text-sm text-gray-100">
                            {{attribute}}
                              </dd>
                          </div>

                          
                  </div>
                    
                  </dl>
              
            </div>

         
          
       </div>
              

              
                <!-- This example requires Tailwind CSS v2.0+ -->
           
            <!-- Reviews -->
             <div class="bg-gray-800 shadow overflow-hidden sm:rounded-lg mt-10">
                <div class="px-4 py-5 sm:px-6 text-center">
                    <h3 class="text-lg leading-6 font-medium text-gray-100">
                    Reviews for  {{topic.title}}
                    </h3>
                      <div class="mb-2" >
                        <span class="text-gray-300">  Total:</span>
                        <Star v-bind:count="Number(topic.overall_rating)" />
                    </div>
                    <p class="mt-1   text-sm text-gray-300">
                        A ski resort's overall star rating displayed here is not calculated based on a simple average but takes several factors, including the age of a review, into account.
                    </p>
                </div>
                <div class="bg-gray-700 px-1 lg:px-4 py-5 ">
                    <div class="flex flex-row w-full text-gray-300">
                    <div class="grid flex-grow      place-items-left">
                        <div class="md:grid md:grid-cols-2">
                        <div class="w-36">BEGINNER : </div>
                         <div> <Star v-bind:count="Number(topic.beginner)"   /></div>
                        </div>
                    </div> 
                    <div class="divider divider-vertical"></div> 
                    <div class="grid flex-grow    place-items-left">
                         <div class="md:grid md:grid-cols-2">
                        <div class="w-36">FAMILY FRIENDLY : </div>
                        <div><Star v-bind:count="Number(topic.family_friend)"  /></div>
                        </div>
                    </div>
                    
                    </div>
                     <div class="flex flex-row w-full text-gray-300">
                    <div class="grid flex-grow      place-items-left">
                        <div class="md:grid md:grid-cols-2">
                        <div class="w-36">INTERMEDIATE : </div>
                         <div> <Star v-bind:count="Number(topic.intermediate)"   /></div>
                        </div>
                    </div> 
                    <div class="divider divider-vertical"></div> 
                    <div class="grid flex-grow    place-items-left">
                         <div class="md:grid md:grid-cols-2">
                        <div class="w-36">APRES SKI : </div>
                        <div><Star v-bind:count="Number(topic.apres_ski)"   /></div>
                        </div>
                    </div>
                    
                    </div>
                     <div class="flex flex-row w-full text-gray-300">
                    <div class="grid flex-grow      place-items-left">
                        <div class="md:grid md:grid-cols-2">
                        <div class="w-36">EXPERT : </div>
                          <Star v-bind:count="Number(topic.expert)"  />
                        </div>
                    </div> 
                    <div class="divider divider-vertical"></div> 
                    <div class="grid flex-grow    place-items-left">
                         <div class="md:grid md:grid-cols-2">
                        <div class="w-36">TERRAIN PARK : </div>
                        <div><Star v-bind:count="Number(topic.terrain_park)" /></div>
                        </div>
                    </div>
                    
                    </div>
                     <div class="flex flex-row w-full text-gray-300">
                    <div class="grid flex-grow      place-items-left">
                        <div class="md:grid md:grid-cols-2">
                        <div class="w-36">ALL MOUNTAIN TERRAIN : </div>
                         <div> <Star v-bind:count="Number(topic.all_mountain_terrain)"  /></div>
                        </div>
                    </div> 
                    <div class="divider divider-vertical"></div> 
                    <div class="grid flex-grow    place-items-left">
                         <div class="md:grid md:grid-cols-2">
                        <div class="w-36">OVERALL VALUE : </div>
                        <div><Star v-bind:count="Number(topic.overall_value)" /></div>
                        </div>
                    </div>
                    
                    </div>
                    <div class="w-full text-gray-300 border-t border-gray-800 mt-5">
                        <h2 class="text-center p-4">{{topic.rate_count}} Total Reviews:</h2>
                        <div class="lg:grid lg:grid-cols-2 ">
                            <div class=" md:grid md:grid-cols-2 ">
                                <div class="md:text-right">5 STAR REVIEWS ({{topic.overall_rating_5 || 0}}) : </div>
                                <div class=" pl-2"> <progress class="progress progress-warning " :value="topic.overall_rating_5_progress" max="100"></progress>  </div>
                            </div>
                            <div class=" md:grid md:grid-cols-2 ">
                                <div class="md:text-right">4 STAR REVIEWS ({{topic.overall_rating_4 || 0 }}) : </div>
                                <div class=" pl-2"> <progress class="progress progress-warning " :value="topic.overall_rating_4_progress" max="100"></progress>  </div>
                            </div>
                            <div class=" md:grid md:grid-cols-2 ">
                                <div class="md:text-right">3 STAR REVIEWS ({{topic.overall_rating_3 || 0}}) : </div>
                                <div class=" pl-2"> <progress class="progress progress-warning " :value="topic.overall_rating_3_progress" max="100"></progress>  </div>
                            </div>
                            <div class=" md:grid md:grid-cols-2 ">
                                <div class="md:text-right">2 STAR REVIEWS ({{topic.overall_rating_2 || 0}}) : </div>
                                <div class=" pl-2"> <progress class="progress progress-warning " :value="topic.overall_rating_2_progress" max="100"></progress>  </div>
                            </div>
                            <div class=" md:grid md:grid-cols-2 ">
                                <div class="md:text-right">1 STAR REVIEWS ({{topic.overall_rating_1 || 0}}) : </div>
                                <div class=" pl-2"> <progress class="progress progress-warning " :value="topic.overall_rating_1_progress" max="100"></progress>  </div>
                            </div>
                             
                        </div>
                    </div>
                   <div class="w-full text-gray-300 border-t border-gray-800 mt-5  text-center">
                      <label for="addReviewsBox"> <a class="btn btn-outline  btn-warning btn-lg text-orange-500 mt-5">Rate this Resort</a> </label>
                   </div>

                </div>
             </div>
             
      
<input type="checkbox" :checked="addReviewsChecked"  v-model="addReviewsChecked"   id="addReviewsBox" class="modal-toggle"> 
<div class="modal" >
  <div class="modal-box p-0" >
             <div class="py-3 shadow overflow-hidden sm:rounded-lg " >
                <div class="text-center">
                    <h3 class="text-lg leading-6 font-medium ">
                    Rate "{{topic.title}}"
                    </h3>
                      
                    <p class="mt-1   text-sm ">
                        Share your experience at this resort to help other skiers.
                        </p>
                </div>
                <div class=" px-4 py-5 ">
                    <div class="flex flex-row w-full ">
                    <div class="grid flex-grow      place-items-left">
                        <div class="">
                        <div class="w-40 text-xs py-1">BEGINNER : </div>
                         <div> <Star   name="beginner" @clickstar="clickstar"  /></div>
                        </div>
                    </div> 
                    <div class="divider divider-vertical"></div> 
                    <div class="grid flex-grow    place-items-left">
                         <div class="">
                        <div class="w-40 text-xs py-1">FAMILY FRIENDLY : </div>
                        <div><Star  @clickstar="clickstar" name="family_friend" /></div>
                        </div>
                    </div>
                    
                    </div>
                     <div class="flex flex-row w-full ">
                    <div class="grid flex-grow      place-items-left">
                        <div class="">
                        <div class="w-40 text-xs py-1">INTERMEDIATE : </div>
                         <div> <Star   name="intermediate" @clickstar="clickstar"/></div>
                        </div>
                    </div> 
                    <div class="divider divider-vertical"></div> 
                    <div class="grid flex-grow    place-items-left">
                         <div class="">
                        <div class="w-40 text-xs py-1">APRES SKI : </div>
                        <div><Star  name="apres_ski" @clickstar="clickstar"/></div>
                        </div>
                    </div>
                    
                    </div>
                     <div class="flex flex-row w-full ">
                    <div class="grid flex-grow      place-items-left">
                        <div class="">
                        <div class="w-40 text-xs py-1">EXPERT : </div>
                          <Star   name="expert" @clickstar="clickstar"/>
                        </div>
                    </div> 
                    <div class="divider divider-vertical"></div> 
                    <div class="grid flex-grow    place-items-left">
                         <div class="">
                        <div class="w-40 text-xs py-1">TERRAIN PARK : </div>
                        <div><Star   name="terrain_park" @clickstar="clickstar" /></div>
                        </div>
                    </div>
                    
                    </div>
                     <div class="flex flex-row w-full ">
                    <div class="grid flex-grow      place-items-left">
                        <div class="">
                        <div class="w-40 text-xs py-1">ALL MOUNTAIN TERRAIN : </div>
                         <div> <Star name="all_mountain_terrain" @clickstar="clickstar"/></div>
                        </div>
                    </div> 
                    <div class="divider divider-vertical"></div> 
                    <div class="grid flex-grow    place-items-left">
                         <div class="">
                        <div class="w-40 text-xs py-1">OVERALL VALUE : 
                            <!-- <Test  @clickstar="clickstar" /> -->
                        </div>
                        <div><Star   name="overall_value" @clickstar="clickstar"/></div>
                        </div>
                    </div>
                     </div>
                    <div class="w-full   border-t   mt-5">
                        <h2 class="text-center p-2">Select your Overall Rating:</h2>
                        <div class="grid flex-grow     place-items-center">
                           
                             <Star  name="overall_rating" @clickstar="clickstar"/>
                        </div>
                         
                        

                    </div>
                     <div class="w-full   border-t   mt-5">
                        <h2 class="text-center p-4"> FULL REVIEW:<span class=" text-red-500">*</span></h2>
                        <div class="grid flex-grow     place-items-center">
                              <textarea   name="review" id="full-review" placeholder="Example: Wish they would open upper peak 6 and 8, otherwise we'll vacation to copper mtn. Wish they would open upper peak 6 and 8, otherwise we'll vacation to copper mtn." title="Example: Wish they would open upper peak 6 and 8, otherwise we'll vacation to copper mtn. Wish they would open upper peak 6 and 8, otherwise we'll vacation to copper mtn." class="m-0  w-full h-32 border-b border-gray-200 text-gray-600 p-2"></textarea>
                        </div>
                         
                        

                    </div>

                   


                </div>
                  <div class="modal-action p-5">
                    <label @click="addReview" class="btn btn-primary">Submit</label>
                    <label  for="addReviewsBox" class="btn border-0 bg-gray-400 hover:bg-gray-500 ">Close</label> 
                </div>
             </div>
           
 </div> 
   
 </div>

                <div class="pb-16" v-if="posts.length>0">
                     

                    <h2 class="text-gray-200 mt-4 mb-4">{{Number(topic.postcount)-1}} Comments</h2> 
                   
                
                     <div  class="text-gray-300   border-b border-gray-700 py-3" v-for="(item,key) in posts"  v-bind:key="key" :id="'post_'+item.pid">
                <a :href="'/uid/'+item.user.uid" class="card   side "><div class="flex-row items-center space-x-4 card-body p-0"><div>
                          <div class="avatar" v-if="item.user.picture"><div class="rounded-full w-10 h-10 shadow" ><img  :src="item.user.picture"></div></div>
                          <div class="avatar placeholder" v-else><div class="bg-neutral-focus text-neutral-content rounded-full w-10 h-10" :style="'background-color:'+ item.user['icon:bgColor']"><span>{{item.user['icon:text']}}</span></div></div> 
                        </div> <div><h2 class="card-title  mb-0">{{item.user.username}}</h2> <p class="">{{item.timestamp}}</p></div></div></a>
                <div class="card-body py-2  ">
                    
                    <div class="reply-content">
                        <div  v-html="item.content"></div>
                            <!-- materials -->
                        <div v-for="(material,key) in item.materials"  v-bind:key="key">
                          <img  v-if="material.type=='image'"  :src="material.url+'?imageView2/2/w/1600'">
                          <iframe  v-if="material.type=='youtube_video'" class="w-full h-48 md:h-96"  :src="material.url" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                          <p class="py-2"> {{material.caption}}</p>
                        </div>
                
                    </div>
                    <div class="flex items-center justify-end text-gray-300 mt-4  pb-3 text-sm">
                        <div >
                         <a class="cursor-pointer"   @click="reply(topic,item)">
                          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline-block ml-2" viewBox="0 0 20 20" fill="currentColor">
                          <path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                          </svg>
                          <span class="inline-block" >Reply</span>
                         </a>
                         <a class="cursor-pointer"  @click="quote(topic,item)"   >
                          <svg t="1641370536617" class="h-4 w-4 inline-block ml-2 cursor-pointer" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21303" width="200" height="200"><path d="M469.333333 170.666667v42.666666h-21.333333a234.666667 234.666667 0 0 0-234.496 225.237334L213.333333 448v21.333333H170.666667v-21.333333a277.333333 277.333333 0 0 1 267.392-277.162667L448 170.666667h21.333333zM853.333333 170.666667v42.666666h-21.333333a234.666667 234.666667 0 0 0-234.496 225.237334L597.333333 448v21.333333h-42.666666v-21.333333a277.333333 277.333333 0 0 1 267.392-277.162667L832 170.666667h21.333333zM469.333333 469.333333v384H170.666667v-384h298.666666z m-42.666666 42.666667H213.333333v298.666667h213.333334v-298.666667zM853.333333 469.333333v384h-298.666666v-384h298.666666z m-42.666666 42.666667h-213.333334v298.666667h213.333334v-298.666667z" fill="#dbdbdb" p-id="21304"></path></svg>
                          <span class="inline-block align-bottom"  >Quote</span>
                         </a>

                          <div data-tip="I like this" class="inline-block tooltip cursor-pointer"  @click="upvotes(topic,item,$event)">
                            <svg   t="1641192768302" class="h-4 w-4 inline-block ml-2 " viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12280" width="200" height="200"><path d="M511.913993 928.016126c-28.898371 0-57.968755-12.729044-86.695112-41.455401L106.30472 564.034268C68.117588 516.38636 31.994625 471.318663 31.994625 383.935495c0-141.223585 114.905426-255.956996 255.956996-255.956996 53.15236 0 104.068537 16.169326 147.244079 46.615824 14.449185 10.148833 17.889467 30.102469 7.740635 44.551655-10.148833 14.449185-30.102469 17.889467-44.551655 7.740635-32.338653-22.877877-70.525785-34.918864-110.433059-34.918864-105.960692 0-191.967747 86.179069-191.967747 191.967747 0 61.409037 20.297665 90.135394 59.172854 138.643373l315.645893 318.742147c15.997312 15.997312 28.898371 22.361834 41.283387 22.533848 12.729044 0.172014 24.942046-6.192508 41.455401-22.705863l316.677977-319.946246c25.974131-28.210314 57.968755-75.858223 57.968755-137.439274 0-105.960692-86.179069-191.967747-191.967747-191.967747-47.991937 0-94.091718 17.889467-129.526625 50.22812l-133.998992 134.171006c-12.55703 12.55703-32.682681 12.55703-45.239711 0s-12.55703-32.682681 0-45.239711l135.031077-135.203091c48.335965-44.207626 109.745003-67.945574 173.734252-67.945574 141.223585 0 255.956996 114.905426 255.956996 255.956996 0 82.394759-41.111372 144.319839-75.686209 181.646901L598.781119 886.388712C569.882748 915.287082 540.984378 928.016126 511.913993 928.016126z" p-id="12281" fill="#dbdbdb"></path></svg>
                            <span    class="inline-block">{{item.upvotes}}</span>
                          </div>
                           <a data-tip="I dislike this" class="cursor-pointer tooltip"  @click="dislike(topic,item,$event)">
                            <svg  t="1641370406426" class="h-4 w-4 inline-block ml-2  cursor-pointer" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20732" width="200" height="200"><path d="M250.4 114.9l1.4 0.2h4.1l518-0.2h4.9c9.5 0.8 18.6 4 26.7 9.3 9.3 6.2 16.6 14.7 21.7 25.3l1.5 3.2 0.9 1.3 79.6 366.1v0.9c0 1.6 0.1 3.7 0.3 6v0.2c1 14.2-2.2 28-9.4 40-10.9 18.2-28.8 29.2-49.2 30l-3.1 0.1-2 0.3-196.7 0.2c-18.1 0-35.4 8.7-46.1 23.3-10.8 14.6-14 33.7-8.6 51 10.9 35.4 16.5 72.4 16.5 110 0 20.5-1.7 41.2-5.1 61.6l-3.6 16.3c-3.1 13.8-10.5 26.3-21 35.1-7.2 6-19.3 13.3-35.8 13.3-32.3 0-58.6-28.3-58.6-63 0-1.6 0.1-3.5 0.3-5.7l0.3-2.9-0.1-2.9c-3.9-146.3-113-264.5-253.8-274.9l-1.8-0.1h-1.8l-115.8-0.3-0.3-443.4 131-0.1h4.1l1.5-0.2m0.1-50.3c-1.9 0-3.8 0.2-5.6 0.5l-137.8 0.1c-1.9-0.3-3.9-0.5-5.9-0.5-20.6 0-37.3 17.3-37.3 38.8l0.3 466.5c0 21.4 16.7 38.8 37.3 38.8 1.5 0 3-0.1 4.5-0.3l123.9 0.3c114 8.5 204.3 106.4 207.5 226.4-0.3 3.3-0.5 6.7-0.5 10.2 0 62.4 48.6 113 108.6 113 51.5 0 94.6-37.4 105.7-87.6l0.5 0.1c6.1-28.6 9.4-58.3 9.4-88.8 0-43.6-6.6-85.5-18.7-124.8-1.5-4.7 2-9.5 7-9.5l198.2-0.2c1.9 0 3.8-0.2 5.6-0.5 35.6-1.5 69.8-20.5 90-54.4 12.9-21.6 18-45.7 16.3-69.2-0.3-4.3 0-8.7-1.1-13.1l-80.6-370.5c-1.2-4.4-3-8.4-5.4-12-8.6-18-21.7-33.8-39.2-45.4-18.3-12.1-38.8-17.8-59-17.8h-0.2v0.2l-518 0.2c-1.8-0.3-3.6-0.5-5.5-0.5z" p-id="20733" fill="#dbdbdb"></path><path d="M212 102.1h50v480h-50z" p-id="20734" fill="#dbdbdb"></path></svg>
                            <span class="inline-block">Dislike</span>
                           </a>
                         <div class=" inline-block relative ">
                             <label> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-4 h-4 stroke-current text-gray-300 ml-2 cursor-pointer" @click="showTool">  <!----> <!----> <!----> <!----> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path> <!----> <!----> <!----> <!----> <!----> <!----> <!----> <!----> <!----> <!----> <!----> <!----> <!----> <!----> <!----> <!----> <!----> <!----> <!----> <!----></svg>
                              <input class="button_for_menuitem hidden" type="checkbox">
                              <div role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1" class="origin-top-right absolute right-0 mt-2 w-48 z-50  rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none hidden">
                                <a v-if="item.uid==$store.state.user.uid"   role="menuitem" tabindex="-1" @click="edit(topic,item)"  class="block px-4 py-2  cursor-pointer text-gray-700"> Edit</a> 
                                 <a v-if="item.uid==$store.state.user.uid"   role="menuitem" tabindex="-1"  class="block px-4 py-2  cursor-pointer text-gray-700"  @click="deletePost(topic,item,$event)" > Delete</a> 
                                <!-- <a  @click="bookmark(topic,topic.post)" role="menuitem" tabindex="-1"   class="block px-4 py-2  cursor-pointer text-gray-700"> Bookmark ({{topic.post.bookmarks}}) </a>  -->
                                <a  @click="flag(topic,item)" role="menuitem" tabindex="-1"   class="block px-4 py-2 cursor-pointer  text-gray-700"> Flag this post</a>
                              </div>
                              </label>
                          </div>
                        </div>
                </div>
                </div>
                </div>
 
                </div>

   <h2 class="text-xl mt-6 leading-8 font-extrabold tracking-tight text-gray-100">Related Ski Resort</h2>
           <div class="  text-gray-300  grid grid-cols-1 gap-4  sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5">
                 <a  class=" bg-cover mt-3  rounded-box block" v-for="(item,key) in relatedSkiResortList"  v-bind:key="key" :style="'background-image: url('+item.cover+')'" :href="'/ski-resort/'+item.slug">
                <!-- <figure class="h-20 w-40 pt-2">
                    <img class="h-20 w-40"  src="https://picsum.photos/id/1005/400/250">
                </figure>  -->
                <div class="bg-gray-800 bg-opacity-75 p-4 rounded-box h-full">
                    <h2 class="card-title text-gray-100 p-0 m-0" v-html="item.title"></h2> 
                    <div class="mb-2" >
                        <Star :count="Number(item.overall_rating)" />
                    </div>
                    <p  class="line-2" v-html="item.description"></p> 
                    <div class="truncate mt-2"  v-if="item.tags && item.tags.length>0">
                    <a  class="btn btn-outline btn-xs text-gray-400 mr-1" v-for="(tag,key) in item.tags" v-bind:key="key" :href="'/tags/'+tag" >{{tag}}</a> 
                    </div>
                       <div class="mt-2"> 
                        <span class="float-left"> {{item.postcount}} Reviews</span>
                        <div class="float-right">
                        <svg t="1641192519668" class="h-6 w-6 inline-block" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11421" width="200" height="200"><path d="M923.421 501.927c-31.19-83.254-86.289-154.373-159.107-205.71-74.638-52.55-162.384-80.464-254.013-80.464s-179.374 27.792-254.013 80.464c-72.94 51.458-127.917 122.576-159.107 205.71l-3.884 10.194 3.884 10.194c31.19 83.254 86.289 154.373 159.107 205.71 74.638 52.55 162.384 80.464 254.013 80.464s179.374-27.792 254.013-80.464c72.94-51.458 127.917-122.576 159.107-205.71l3.884-10.194-3.884-10.194z m-413.12 248.429c-155.102 0-296.126-95.269-354.623-238.114 58.375-142.965 199.521-238.114 354.623-238.114s296.126 95.269 354.623 238.114c-58.497 142.845-199.643 238.114-354.623 238.114z" p-id="11422" fill="#dbdbdb"></path><path d="M510.301 357.99c-84.955 0-154.131 69.177-154.131 154.131s69.177 154.131 154.131 154.131 154.131-69.177 154.131-154.131S595.255 357.99 510.301 357.99z m0 250.008c-52.914 0-95.877-42.962-95.877-95.877s42.962-95.877 95.877-95.877 95.877 42.962 95.877 95.877-43.084 95.877-95.877 95.877z" p-id="11423" fill="#dbdbdb"></path></svg>
                        <span class="inline-block">{{item.viewcount}}</span>
                        <svg t="1641192768302" class="h-4 w-4 inline-block ml-2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12280" width="200" height="200"><path d="M511.913993 928.016126c-28.898371 0-57.968755-12.729044-86.695112-41.455401L106.30472 564.034268C68.117588 516.38636 31.994625 471.318663 31.994625 383.935495c0-141.223585 114.905426-255.956996 255.956996-255.956996 53.15236 0 104.068537 16.169326 147.244079 46.615824 14.449185 10.148833 17.889467 30.102469 7.740635 44.551655-10.148833 14.449185-30.102469 17.889467-44.551655 7.740635-32.338653-22.877877-70.525785-34.918864-110.433059-34.918864-105.960692 0-191.967747 86.179069-191.967747 191.967747 0 61.409037 20.297665 90.135394 59.172854 138.643373l315.645893 318.742147c15.997312 15.997312 28.898371 22.361834 41.283387 22.533848 12.729044 0.172014 24.942046-6.192508 41.455401-22.705863l316.677977-319.946246c25.974131-28.210314 57.968755-75.858223 57.968755-137.439274 0-105.960692-86.179069-191.967747-191.967747-191.967747-47.991937 0-94.091718 17.889467-129.526625 50.22812l-133.998992 134.171006c-12.55703 12.55703-32.682681 12.55703-45.239711 0s-12.55703-32.682681 0-45.239711l135.031077-135.203091c48.335965-44.207626 109.745003-67.945574 173.734252-67.945574 141.223585 0 255.956996 114.905426 255.956996 255.956996 0 82.394759-41.111372 144.319839-75.686209 181.646901L598.781119 886.388712C569.882748 915.287082 540.984378 928.016126 511.913993 928.016126z" p-id="12281" fill="#dbdbdb"></path></svg>
                        <span class="inline-block">{{item.upvotes}}</span>
                        </div>
                        <div class="clear-both"></div>

                    </div>
                </div>
                </a>
                 
           </div>

       </div>
       
       
       </div>

       <h2 class="text-xl mt-6 px-6 leading-8 font-extrabold tracking-tight text-gray-100">Related Topics</h2>
             <!-- All Reviews -->
<div  class="grid px-6 grid-cols-1 gap-4  mt-4  sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6">
    
             <a class="card bg-gray-700 topic-item mb-4 " v-for="(item,key) in relatedTopicsList"  v-bind:key="key"  :href="'/topic/'+item.slug" >
      <figure class="h-40" >
        <img  class="object-cover h-40 w-full" :src="item.cover" >
      </figure> 
      <div class="card-body p-2">
        <div class="card"><div class="flex-row items-center space-x-4 card-body p-0"><div>
            <a :href="'/uid/'+item.uid" class="avatar" v-if="item.picture"><div class="rounded-full w-10 h-10 shadow" ><img   :src="item.picture"></div></a>
             <a  :href="'/uid/'+item.uid" class="avatar placeholder" v-else><div class="bg-neutral-focus text-neutral-content rounded-full w-10 h-10" :style="'background-color:'+ item['icon:bgColor']"><span>{{item['icon:text']}}</span></div></a> 
        </div> <div><h2 class=" text-gray-200 line-2" v-html="item.title"></h2> </div></div></div>
       <div class="truncate mt-2"  v-if="item.tags && item.tags.length>0">
            <a  :href="'/tags/'+tag" class="btn btn-outline btn-xs text-gray-400 mx-1" v-for="(tag,key) in item.tags" v-bind:key="key">{{tag}}</a> 
        </div>
         <div class="p-2 text-gray-400"> 
            <span class="float-left">{{item.timestamp}}</span>
            <div class="float-right">
            <svg t="1641192519668" class="h-6 w-6 inline-block" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11421" width="200" height="200"><path d="M923.421 501.927c-31.19-83.254-86.289-154.373-159.107-205.71-74.638-52.55-162.384-80.464-254.013-80.464s-179.374 27.792-254.013 80.464c-72.94 51.458-127.917 122.576-159.107 205.71l-3.884 10.194 3.884 10.194c31.19 83.254 86.289 154.373 159.107 205.71 74.638 52.55 162.384 80.464 254.013 80.464s179.374-27.792 254.013-80.464c72.94-51.458 127.917-122.576 159.107-205.71l3.884-10.194-3.884-10.194z m-413.12 248.429c-155.102 0-296.126-95.269-354.623-238.114 58.375-142.965 199.521-238.114 354.623-238.114s296.126 95.269 354.623 238.114c-58.497 142.845-199.643 238.114-354.623 238.114z" p-id="11422" fill="#dbdbdb"></path><path d="M510.301 357.99c-84.955 0-154.131 69.177-154.131 154.131s69.177 154.131 154.131 154.131 154.131-69.177 154.131-154.131S595.255 357.99 510.301 357.99z m0 250.008c-52.914 0-95.877-42.962-95.877-95.877s42.962-95.877 95.877-95.877 95.877 42.962 95.877 95.877-43.084 95.877-95.877 95.877z" p-id="11423" fill="#dbdbdb"></path></svg>
            <span class="inline-block">{{item.viewcount}}</span>
            <svg t="1641192768302" class="h-4 w-4 inline-block ml-2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12280" width="200" height="200"><path d="M511.913993 928.016126c-28.898371 0-57.968755-12.729044-86.695112-41.455401L106.30472 564.034268C68.117588 516.38636 31.994625 471.318663 31.994625 383.935495c0-141.223585 114.905426-255.956996 255.956996-255.956996 53.15236 0 104.068537 16.169326 147.244079 46.615824 14.449185 10.148833 17.889467 30.102469 7.740635 44.551655-10.148833 14.449185-30.102469 17.889467-44.551655 7.740635-32.338653-22.877877-70.525785-34.918864-110.433059-34.918864-105.960692 0-191.967747 86.179069-191.967747 191.967747 0 61.409037 20.297665 90.135394 59.172854 138.643373l315.645893 318.742147c15.997312 15.997312 28.898371 22.361834 41.283387 22.533848 12.729044 0.172014 24.942046-6.192508 41.455401-22.705863l316.677977-319.946246c25.974131-28.210314 57.968755-75.858223 57.968755-137.439274 0-105.960692-86.179069-191.967747-191.967747-191.967747-47.991937 0-94.091718 17.889467-129.526625 50.22812l-133.998992 134.171006c-12.55703 12.55703-32.682681 12.55703-45.239711 0s-12.55703-32.682681 0-45.239711l135.031077-135.203091c48.335965-44.207626 109.745003-67.945574 173.734252-67.945574 141.223585 0 255.956996 114.905426 255.956996 255.956996 0 82.394759-41.111372 144.319839-75.686209 181.646901L598.781119 886.388712C569.882748 915.287082 540.984378 928.016126 511.913993 928.016126z" p-id="12281" fill="#dbdbdb"></path></svg>
            <span class="inline-block">{{item.upvotes}}</span>
            </div>
            <div class="clear-both"></div>

         </div>
       </div>
            </a> 
</div>
             <!-- Add Reviews -->
   </div>

     <!--举报 -->
            <input type="checkbox" id="my-modal-flag" class="modal-toggle"> 
            <div class="modal">
                <div class="modal-box">
                    <div>
                      <h1>Report Content</h1>
                      <p>Please specify your reason for flagging post 53 for review. Alternatively, use one of the quick report buttons if applicable.</p>
                        <form class="form-horizontal edit-form">
                               <div class="p-6 card bordered">
                                  
                                  <div class="form-control">
                                    <label class="cursor-pointer label">
                                      <span class="label-text">Spam</span> 
                                      <input type="radio" name="opt" @click="setReportValue('Spam')" checked  class="radio" value="Spam">
                                    </label>
                                  </div> 
                                  <div class="form-control">
                                    <label class="cursor-pointer label">
                                      <span class="label-text">Offensive</span> 
                                      <input type="radio" name="opt"  @click="setReportValue('Offensive')"  class="radio" value="Offensive">
                                    </label>
                                  </div> 
                                  <div class="form-control">
                                    <label class="cursor-pointer label">
                                      <span class="label-text">Other (specify below)</span> 
                                      <input type="radio" @click="setReportValue('Other')" name="opt"  class="radio" value="Other">
                                    </label>
                                  </div> 
                                  
                               </div>

                                  <div class="form-control">
                                 <textarea id="OtherReportValue" class="textarea h-24 textarea-bordered" :disabled="reportValue!='Other'" placeholder="Reason for reporting this content..."></textarea>
                               </div>
                                
 
                            </form>
                    </div>
                    <div class="modal-action">
                    <label @click="doFlag" class="btn btn-primary"> Submit Report</label> 
                    <label for="my-modal-flag" class="btn">Close</label>
                    </div>
                </div>
            </div>
<!--  举报 -->
</div>
</template>


<script>
import Star from '../components/Star.vue';

export default {
  components: { Star },
  layout({req}){
    // //console.log("req.layout:",req.layout)
     return "web";
  },
 
  name: 'IndexPage',
   data(){
    //    //console.log("this.topic:",this.topic)
   
    return { 
      page:2,
      slideTpye:'small',
      newTopicData:{},
      keywords:'',
      user:{},
      moreContentStatus:false,
      pl:"pl-0",
      addReviewsChecked:false,
      reloadEditCommnet:0,
      reportValue:'Spam',
      newCommnetData:{
          modalName:'my-modal-comment',
          title:'',
          content:'',
          toPid:0,
          pid:0,
          tid:0,
      },
      reviewData:{
        all_mountain_terrain:3,
        overall_value:3,
        expert:3,
        apres_ski:3,
        terrain_park:3,
        intermediate:3,
        family_friend:3,
        beginner:3,
        overall_rating:3
      }
     
    }
  },
   async asyncData({params,$Data,error}) {
    
    // name:
    let res = await $Data.getTopic(params.id);
    // //console.log("getATopic:",res);
    if(res.code>0){
      console.error("getATopic Error:",res.msg);
      return;
    }
    let topic = res.data;
    if(!topic || !topic.tid){
        error({
            'statusCode':404,
            'message':'Page Not Found',
        })
        return
    }
 
    if(topic.cid!=3){
      redirect(301,"/topic/"+topic.slug);
      return;
    }
    let mete_description = topic.post.content.slice(0,100)
    // post 
    // post 
    let postRes = await $Data.getPostsBySlug(topic.slug);
    let posts = postRes.data;
    if(postRes.code>0){
      // console.error("getPostsBySlug Error:",postRes.msg);
      // return;
       posts = [];
    }else{
       posts.splice(0,1);
    }

    let keywords = topic.title +","+topic.user.username
    // Related Topics 2
    for (const tag of topic.tags) {
        keywords+=","+tag.value;
    }
    let p ={
       cid:">3",
       keywords:keywords,
       type:"topic",
       size:20,
    }
    let relatedTopics = await $Data.getDocsBykeywords(p);
    // Related Ski Resort 3
    // //console.log("relatedTopics:",p,relatedTopics)
    p.cid = 3
    p.size = 6
    let relatedSkiResort = await $Data.getDocsBykeywords(p);
    // //console.log("relatedSkiResort:",p,relatedSkiResort)
    // newTopicData
    let tags = [topic.title];
    if(tags.city){
        tags.push(tags.city);       
    }
    let newTopicData = {
          modalName:'my-modal-resort',
          title:'Rate "'+topic.title+'"',
          tags:tags,
      };
     return { 
       topic,
       newTopicData,
       mete_title:topic.title,
       mete_description ,
       keywords,
       relatedTopicsList:relatedTopics.data.list,
       relatedSkiResortList:relatedSkiResort.data.list,
       posts
     }
   },
   head() {
    return {
      title: this.mete_title,
      meta: [
        {
          name: 'description',
          content:this.mete_description,
        },
      ],
      script: [
       {
          src: '/js/turndown.js',
          ssr: true,
        },
        {
         
          src: '/snogogo_nuxt/api/user_read_tag?tid='+this.topic.tid,
          ssr: false,
        }
      ],
      
    };
  },
    async fetch({ store, params }) {
      // //console.log("store.state.user:",store)
      // await store.dispatch('GET_USER')
       
   },
   mounted(){
     var _this = this;
     this.$tools.nextPage(()=>{
        _this.getDocsWithScore()
     });
   } ,
  methods: {
      async getDocsWithScore( ){
       //this.$tools.showToast('Loading...', 10000)
       if( this.loading ==1 || this.lastpage==1){
         return;
       }
       this.loading =1;
       let post = {
         keywords:this.keywords,
         page:this.page,
         cid:">3",
         limit:20,
         type:"topic",
       }
       this.showNoting = false;
       let res = await  this.$axios.post("snogogo_nuxt/api/getDocsWithScore",post )
       this.loading = 0;
       if(res.code>0){
         
          this.$tools.alert("error",res.code+":"+res.msg)
          return;
       }
       this.page++;
       if(res.data.list.length==0){
         this.lastpage=1;
          return;
       }
       
        
      this.relatedTopicsList = this.relatedTopicsList.concat(res.data.list);
        
        
      
     },
      flag(topic,post){
      if(this.$store.state.user.uid==0){
        document.getElementById("SnogogologinBox").checked=true
        return;
      }
      document.getElementById("my-modal-flag").checked = true;
      this.report_id = post.pid;
    },
    async doFlag(){
      
        let post = {
          reason:this.reportValue,
          id:this.report_id,
          type:'post'
        };
        if(this.reportValue=="Other"){
           post.reason = document.getElementById("OtherReportValue").value;
        }
        let res = await  this.$axios.post("snogogo_nuxt/api/flag",post);
        if(res.code>0){
          this.$tools.alert("error", res.msg);
          return;
        }
         document.getElementById("my-modal-flag").checked = false;
        this.$tools.alert("success", res.msg);
        

    },
    async deletePost(topic,post,event){
       let type = "delpost";
       let url ="snogogo_nuxt/api/post/delete";
       let msg ="Are you sure you want to delete this post?"
       if(topic.mainPid==post.pid){
          url ="snogogo_nuxt/api/topic/delete";
          type = "deltopic";
          msg="Are you sure you want to purge this topic?"
       }
      if(!confirm(msg)){
         return;
       }

       let params ={
          pid:post.pid,
          tid:topic.tid
       }
      let res = await  this.$axios.post(url,params);
      if(res.code>0){
        this.$tools.alert("error", res.msg);
        return;
      }
      this.$tools.alert("success", res.msg);
      if(type=="deltopic"){
        window.location.href="/uid/"+topic.uid;
      }else{
        $("#post_"+post.pid).remove();
      }

    },

    // edit 文章
    edit(topic,post){
      if(this.$store.state.user.uid==0){
        document.getElementById("SnogogologinBox").checked=true
        return;
      }
       
      var tags =[];
      if(topic.tags && topic.tags.length>0){
        for (const tag in topic.tags) {
          tags.push(topic.tags[tag].value)
        }
      }
      	
	 	var content = post.content;
     const turndownService = new TurndownService();
		var markdown = turndownService.turndown(content);
      let obj ={
         cover : {
            url: topic.cover,
          },
         content:markdown,
         materials:post.materials,
         title:topic.title,
         tags:tags,
         
         
      }
      // 修改主帖
      if(topic.mainPid==post.pid){
        obj.mainPid = topic.mainPid;
        obj.tid = topic.tid;
        if(topic.cid){
          obj.cid = parseInt(topic.cid) ;
        }
        if(topic.userCategoryId){
          obj.userCategoryId  = topic.userCategoryId;
        }
        
        // document.getElementById("my-modal-edit-topic").checked = true;
        document.getElementById("my-modal-edit-topic").click();
        this.reloadEditTopic++; 
        this.editData =  Object.assign(this.editData, obj) ;
      }else{
        //修改回复
         obj.pid = post.pid;
         document.getElementById("my-modal-comment").checked=true
         this.newCommnetData =  Object.assign(this.newCommnetData, obj) ;
         this.reloadEditCommnet++;
         
      }

      //console.log("topic:",topic,"post:",post)
     
     
    },
    reply(topic,post){
      if(this.$store.state.user.uid==0){
        document.getElementById("SnogogologinBox").checked=true
        return;
      }
      //  var newCommnetData  = this.newCommnetData;
       var username =post.user?post.user.username: topic.user.username;
       this.newCommnetData.tid = topic.tid;
       this.newCommnetData.toPid = post.pid;
       this.newCommnetData.title =' Replying to "'+topic.title+'"';
       this.newCommnetData.content ="@"+username+" ";
      //  console.log(" this.newCommnetData:", this.newCommnetData);
      //  this.newCommnetData = newCommnetData;
      // this.reloadEditCommnet++;
       document.getElementById("my-modal-comment").checked=true
      //  document.getElementById("my-modal-comment_content").value =this.newCommnetData.content
       //console.log("newCommnetData:",this.newCommnetData)
    },
    
    quote(topic,post){
      if(this.$store.state.user.uid==0){
        document.getElementById("SnogogologinBox").checked=true
        return;
      }
        const turndownService = new TurndownService();
		    var markdown = turndownService.turndown(post.content);
       var username  =post.user?post.user.username: topic.user.username;
       this.newCommnetData.tid = topic.tid;
       this.newCommnetData.toPid = post.pid;
       this.newCommnetData.title =' Replying to "'+topic.title+'"';
       this.newCommnetData.content =`@`+username+` said in [`+topic.title+`](/post/`+post.pid+`):
> `+markdown+`
`;
      // this.reloadEditCommnet =1;
        // document.getElementById("my-modal-comment_content").value =this.newCommnetData.content
       document.getElementById("my-modal-comment").checked=true

    }, 
     setReportValue(v){
      this.reportValue = v;
    },
showTool(){
      //console.log(this)
    },
   async upvotes(topic,post,event){
        var el = event.currentTarget;
        var count = Number($(el).find("span").text());
        
        let pid =  post.pid;
        let res = await  this.$axios.post("snogogo_nuxt/api/vote",{pid:pid,type:"up"});
        if(res.code>0){
          this.$tools.alert("error", res.msg);
          return;
        }
        if(count>0){
          $(el).find("span").text(count+1)
        }else{
          $(el).find("span").text(1);
        }

         this.$tools.alert("success", res.msg);


    },
   async dislike(topic,post,event){
        var el = event.currentTarget;
        //console.log("event:",event,el)
        var count = Number($(el).prev().find("span").text());

        let pid =  post.pid;
        let res = await  this.$axios.post("snogogo_nuxt/api/vote",{pid:pid,type:"dislike"});
        if(res.code>0){
          this.$tools.alert("error", res.msg);
          return;
        }
         if(count>0){
          $(el).prev().find("span").text(count-1)
        }else{
          $(el).prev().find("span").text(-1);
        }
        this.$tools.alert("success", res.msg);
    },
      clickstar(data){
          if(data && data.name){
            this.reviewData[data.name] = data.count
          }          
      },
      showMoreContent(){
        this.moreContentStatus = !this.moreContentStatus;
      },
      async addReview(){
          // this.addReviewsChecked = false;
          // document.getElementById("my-modal-resort").checked = true;
          var newTopicData = this.newTopicData;
          newTopicData.extend = this.reviewData;
        //   newTopicData.cid = 3;
          newTopicData.skiResortId = this.topic.tid;
          newTopicData.tid = this.topic.tid;
           
          var content =  document.getElementById("full-review").value;
          if(content==""){
             this.$tools.alert("Full review can not be empty !");
             return;
          }
          newTopicData.content = content;
         
           let res = await  this.$axios.post("snogogo_nuxt/api/post",newTopicData);
            //this.$tools.hideToast();
            if( res.code>0){
                this.$tools.alert("error", res.msg);
                return;
            }
            
            this.$tools.alert("success", res.msg);
            this.addReviewsChecked = false;
            window.location.reload();
          //console.log("addReview:", this.newTopicData);
          // 
      },
    // 左侧菜单显示
     showBigSlideMenu(){
         this.clickstar();
        // //console.log("per:pl",this.pl,"slideTpye:",this.slideTpye)
        if(this.slideTpye=="small"){
          this.slideTpye="big";
          this.pl="pl-0 md:pl-60";
        }else{
          this.slideTpye="small";
          this.pl="pl-0 md:pl-20";
        }
     }
   }
   
 
     

}
</script>
